<template>
  <div class="gen-container">
    <div class="gen-form">
      <el-divider content-position="center">生成后端代码属性</el-divider>
      <el-form ref="form" :model="params.templateParams" label-width="80px">
        <div class="con1">
          <el-form-item label="包名">
            <el-input v-model="params.templateParams.packageName" placeholder="例如：com.example.ams"></el-input>
          </el-form-item>
          <el-form-item label="模块名">
            <el-input v-model="params.templateParams.module" placeholder="请输入英文，例如： system"></el-input>
          </el-form-item>
          <el-form-item label="表名">
            <el-select @change="changeTable" v-model="params.templateParams.tableName" filterable clearable
                       placeholder="-- 请选择 --">
              <el-option v-for="(item,index) in tables" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实体类名">
            <el-input v-model="params.templateParams.className" placeholder="请输入英文，例如： SysUser"></el-input>
          </el-form-item>
          <el-form-item label="前端代码">
            <el-radio-group v-model="params.templateParams.isVueCode">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
    </div>


    <div class="gen-table">
      <el-divider content-position="center">生成前端代码属性</el-divider>
      <el-table
          :data="params.tableFields"
          height="400px"
          border
          style="width: 100%">
        <el-table-column
            label="字段名"
            width="180">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.field"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            label="类型"
            width="180">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.type"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            label="备注">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.comment"></el-input>
          </template>
        </el-table-column>
        <el-table-column
            label="是否检索">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.searchable" :label="true">是</el-radio>
            <el-radio v-model="scope.row.searchable" :label="false">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="检索类型">
          <template slot-scope="scope">
            <el-radio :disabled="scope.row.searchable === false" v-model="scope.row.searchType" label="0">等值检索
            </el-radio>
            <el-radio :disabled="scope.row.searchable === false" v-model="scope.row.searchType" label="1">模糊检索
            </el-radio>
            <el-radio :disabled="scope.row.searchable === false" v-model="scope.row.searchType" label="2">区间检索
            </el-radio>
            <el-radio :disabled="scope.row.searchable === false" v-model="scope.row.searchType" label="3">范围检索
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="是否排序">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.isOrder" :label="true">是</el-radio>
            <el-radio v-model="scope.row.isOrder" :label="false">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="排序类型">
          <template slot-scope="scope">
            <el-radio :disabled="scope.row.isOrder === false" v-model="scope.row.orderType" label="0">升序</el-radio>
            <el-radio :disabled="scope.row.isOrder === false" v-model="scope.row.orderType" label="1">降序</el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="是否展示">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.isShow" :label="true">是</el-radio>
            <el-radio v-model="scope.row.isShow" :label="false">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="是否form表单项">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.isForm" :label="true">是</el-radio>
            <el-radio v-model="scope.row.isForm" :label="false">否</el-radio>
          </template>
        </el-table-column>
        <el-table-column
            label="表单项类型">
          <template slot-scope="scope">
            <el-radio v-for="item in dicts['form_item_type']" :disabled="scope.row.isForm === false" v-model="scope.row.formItemType" :label="item.value">
              {{ item.label }}
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="gen-generate">
      <el-input v-model="params.templateParams.outPath" placeholder="请输入生成文件输出路径"></el-input>
      <el-button @click="generate" type="primary">生成</el-button>
    </div>
  </div>
</template>

<script>
import {getTableNames, getTableFields, generateCode} from '@/api/genApi'

export default {
  name: "gen",
  dicts: ['form_item_type'],
  data() {
    return {
      params: {
        templateParams: {
          packageName: '',
          module: '',
          tableName: '',
          className: '',
          outPath: 'C:\\code',
          isVueCode: false
        },
        tableFields: []
      },
      tables: [],
    }
  },
  methods: {
    changeTable(tableName) {
      if (tableName) {
        let temp = tableName.split('_')
        temp = temp.map(item => {
          return item.slice(0, 1).toUpperCase() + item.slice(1)
        })
        let res = ''
        temp.forEach(item => {
          res += item
        })
        this.params.templateParams.className = res
      }
      getTableFields(tableName).then(success => {
        this.params.tableFields = success
      })
    },
    generate() {
      generateCode(this.params)
    }
  },
  mounted() {
    getTableNames().then(success => {
      this.tables = success
    })
  }
}
</script>
<style scoped>
.gen-container {
  height: calc(100% - 31px);
}

.gen-container > .gen-form {
  width: 100%;
  padding: 20px 20px 0 20px;
  box-sizing: border-box;
}

.gen-form .con1 {
  width: 100%;
  display: flex;
}

.con1 > .el-form-item {
  width: 25%;
}

.gen-container > .gen-table {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.gen-container > .gen-generate {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
}

.gen-generate > .el-input {
  width: 80%;
}

.gen-generate > .el-button {
  width: 160px;
  margin-left: 50px;
}
</style>